<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container1 {
            width: 200px;
            height: 200px;
            background: pink;
            float: left;
        }

        .container2 {
            width: 300px;
            height: 300px;
            background: #008c8c;
            float: right;
        }

        .context-menu {
            position: fixed;
            left: 500px;
            top: 200px;
            border: 1px solid #ccc;
            padding: 10px;
            line-height: 2;
            min-width: 200px;
            background: #fff;
            display: none;
        }

        .context-menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="container1">

    </div>
    <div class="container2">

    </div>

    <div class="context-menu">
        <ul>
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
            <li>菜单4</li>
            <li>菜单5</li>
            <li>菜单6</li>
            <li>菜单7</li>
            <li>菜单8</li>
            <li>菜单9</li>
            <li>菜单10</li>
        </ul>
    </div>

    <script>
        var div1 = document.querySelector(".container1");
        var div2 = document.querySelector(".container2");
        var menu = document.querySelector(".context-menu");

        div1.oncontextmenu = div2.oncontextmenu = function(e) {
            e.preventDefault();
            menu.style.display = "block";
            menu.style.left = e.clientX + "px";
            menu.style.top = e.clientY + "px";
        }

        window.onmousedown = function() {
            menu.style.display = "none";
            console.log("window.mousedown")
        }
    </script>
</body>

</html>